<template>
    <h3>2属性绑定</h3>
    <!-- 通过 v-bind 指令，你可以绑定 HTML 属性到组件的数据，这样可以使得 DOM 元素的属性
     （如 href、class、src）根据组件的状态动态更新。 -->
    <div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle">
    example</div>
    <!-- v-bind 指令可以将数据绑定到元素的属性上。 -->
    <div :class="dynamicClass" :title="dynamicTitle">
    example</div>
    <button :disabled="isButtonDisabled">Button</button>
    <div v-bind="objectOfAttrs">divdiv</div>
  
    <h3>3条件渲染</h3>
    <!-- Vue 通过 v-if、v-else-if 和 v-else 指令实现条件渲染，
     根据某个数据条件来决定是否渲染某个 DOM 元素 -->
    <div v-if="falg">can you see me</div>
    <!-- v-if 指令根据表达式的值的真假来决定是否渲染元素。 -->
    <div v-else>you find me</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>not A, B, C</div>
    <div v-show="falg">use v-show</div>
    <!-- v-show 只是简单地切换元素的 display:none 样式，不会触发leave/enter等动画效果。 -->
  
    <h3>4列表渲染</h3>
    <!-- 使用 v-for 指令可以渲染一个列表。
     Vue 会根据数组的每一项渲染对应的 DOM 元素，并且在数组数据变化时，自动更新视图 -->
    <p v-for="item in name">{{ item }}</p>
    <!-- v-for 指令可以遍历数组或对象，为每个元素绑定数据。 -->
    <div v-for="item in result">
    <!-- v-for 指令也可以遍历数字，为每个元素绑定索引。 -->
      <p>{{ item.name }}</p>
      <p>{{ item.age }}</p>
      <img :src="item.avatar" alt="">
    </div>
    <div>
      <p v-for="(value, key, index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
    </div>
  
    <h3>5通过key管理状态</h3>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">{{ item.text }}</li>
      <button @click="addItem">Add Item</button>
    </ul>
  
  </template>
  
  <script>
  export default {
    data() {
      return {
        name:["long","jlong","loong"],
        result:[
          {
            name:"long",
            age:20,
            avatar:"https://www.example.com/avatar.jpg"
          },
          {
            name:"jlong",
            age:25,
            avatar:"https://www.example.com/javatar.jpg"
          },
          {
            name:"loong",
            age:30,
            avatar:"https://www.example.com/loong.jpg"
  
          }
        ],
        userInfo:{
          name:"long",
          age:20,
        },
  
        falg:true,
        type: 'D',
  
        dynamicId:"active",
        dynamicClass:"appclass",
        dynamicTitle:null,
        isButtonDisabled:true,
        objectOfAttrs:{
          id:'container',
          class:'appclass',
          title:'this is title'
          }
        }
    }
  }
  </script>
  
  <style>
    .appclass{
      color: red;
      font-size: 20px;
    }
    img{
      width: 50px;
      height: 50px;
    }
  </style>